<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <div id="zyx">123</div>
</body>
<script>
    /** 
     *  语法：React.createElement(标签名, 属性, 子元素,子元素,子元素.....)
     * 
     */
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // //从第三个参数开始包括第三个，都是子元素
    // // 第二个参数是指定标签的属性，如果有属性，那么是一个对象，指定html有的属性，也可以指定自定义的属性
    // const div = React.createElement('div',{id:'yuange',tel:'1311231234123'}, '唱歌','跳舞','打出溜滑'); // react元素  ==> 虚拟dom
    // console.log('div: ', div) // react元素 属性比较少

    // root.render(div)
    
    // console.dir(document.getElementById('zyx'))

    {
        // 标签没有属性,需要进行占位
        let p = React.createElement('p', {}, '空对象占位')
        p = React.createElement('p', null, 'null占位')
        p = React.createElement('p', undefined, 'null占位')

        p = React.createElement('p', 123123, 'null占位')// 可以，但不推荐

        root.render(p)
    }
    
</script>
</html>